<template>
  <div class="container">
    <el-row>
      <el-col class="topTitle">
        <el-col :xl="16" :lg="14" :md="8" :sm="8">
          <div class="leftBox">
            <div>
              <i class="icon iconfont iconfanhui1" @click="goBack"></i
              >{{ name }}
            </div>
            <div class="explain">
              考核周期：{{ startDate }}-{{ endDate }}
              <span style="padding-left: 40px"
                >被考核地区：{{ assessAreaName }}</span
              >
            </div>
          </div>
        </el-col>
        <el-col :xl="8" :lg="10" :md="16" :sm="16">
          <div class="rightBox">
            <div class="totalScoreBox">
              <h3 class="scoreStyle">{{ score }}</h3>
              <p class="scoreStyleInfo">总分</p>
            </div>
            <div class="totalScoreBox">
              <h3 class="scoreStyle">{{ selfEvaluateScore }}</h3>
              <p class="scoreStyleInfo">自评分</p>
            </div>
            <div class="totalScoreBox">
              <h3 class="scoreStyle">{{ assessEvaluateScore }}</h3>
              <p class="scoreStyleInfo">考核评定</p>
            </div>
          </div>
        </el-col>
      </el-col>
    </el-row>
    <div class="mainCon">
      <el-table
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
      >
        <el-table-column
          prop="typeName"
          label="类别"
          align="left"
          :formatter="formatTd"
        ></el-table-column>
        <!-- <el-table-column prop="itemName" label="考核项目" align="center" :formatter=formatTd></el-table-column>  -->
        <el-table-column prop="itemName" label="考核项目" width="230">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.itemName"
              :columnName="'itemName'"
            ></copyText>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="content" label="考核事项" align="center" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="content" label="考核事项" width="230">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.content"
              :columnName="'content'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column label="标准分值" align="center">
          <template slot-scope="scope"> {{ scope.row.referScore }}分 </template>
        </el-table-column>
        <el-table-column label="自评" align="center">
          <template slot-scope="scope">
            {{
              scope.row.assessEvaluateScore == null ||
              scope.row.selfEvaluateScore == 0
                ? '--'
                : scope.row.selfEvaluateScore + '分'
            }}
          </template>
        </el-table-column>
        <el-table-column label="考核评定" align="center">
          <template slot-scope="scope">
            {{
              scope.row.assessEvaluateScore == null ||
              scope.row.assessEvaluateScore == 0
                ? '--'
                : scope.row.assessEvaluateScore + '分'
            }}
          </template>
        </el-table-column>

        <el-table-column label="操作" align="left" :formatter="formatTd">
          <template slot-scope="scope">
            <el-link type="primary" @click="toEvalute(scope.row)">详情</el-link>
          </template>
        </el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
      <!-- getTableList为获取子组件的数据 -->
      <el-col :span="24" class="toolbar" style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="currentTotal"
        >
        </el-pagination>
      </el-col>
    </div>
  </div>
</template>
<script>
export default {
  name: 'selfEvalutionProofList',
  data() {
    return {
      id: '',
      assessAreaName: '',
      endDate: '',
      startDate: '',
      name: '',
      status: '',
      total: '',
      filterField: {
        assessId: '',
      },
      currentPage: 1,
      pageSize: 20,
      currentTotal: 0,
      requestUrl: 'api-gov/assessdetail/expand/assessdetailpage',
      score: '',
      selfEvaluateScore: '', //自评分数
      assessEvaluateScore: '', //考核评定分数
      //表格数据
      tableList: [],
      isShow: false, //列表加载
      // loading: true,
      loading: false,
    }
  },
  activated: function () {},
  created() {
    this.id = this.$route.query.id
    this.filterField.assessId = this.$route.query.id
    this.searchList()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.searchList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.searchList()
    },
    // 搜索
    searchList() {
      this.axios({
        method: 'POST',
        url: this.requestUrl,
        data: {
          pageNo: this.currentPage,
          pageSize: this.pageSize,
          assessId: this.filterField.assessId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.tableList = response.data.result.page.results
            this.assessAreaName = response.data.result.assessAreaName
            this.startDate = response.data.result.startDate
            this.endDate = response.data.result.endDate
            this.expireDate = this.dateMinus(
              this.formatNowDate(),
              response.data.result.expireDate
            )
            this.name = response.data.result.name
            this.score =
              response.data.result.score == null ||
              response.data.result.score == 0
                ? '--'
                : response.data.result.score + '分'
            this.assessEvaluateScore =
              response.data.result.assessEvaluateScore == null ||
              response.data.result.assessEvaluateScore == 0
                ? '--'
                : response.data.result.assessEvaluateScore + '分'
            this.selfEvaluateScore =
              response.data.result.selfEvaluateScore == null ||
              response.data.result.selfEvaluateScore == 0
                ? '--'
                : response.data.result.selfEvaluateScore + '分'
            this.loading = false
            this.currentTotal = response.data.result.page.total
            if (this.tableList.length < 1) {
              this.isShow = true
            }
          }
        })
        .catch((error) => {})
    },
    dateMinus(date1, date2) {
      var sdate = new Date(date1)
      var now = new Date(date2)
      var days = now.getTime() - sdate.getTime()
      var day = parseInt(days / (1000 * 60 * 60 * 24))
      return day
    },
    formatNowDate() {
      var d = new Date(),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear()
      if (month.length < 2) month = '0' + month
      if (day.length < 2) day = '0' + day
      return [year, month, day].join('-')
    },
    getDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-gov/assessdetail/expand/assessdetailpage',
        data: {
          pageNo: 1,
          pageSize: 9999,
          assessId: id,
        },
      })
        .then((response) => {
          this.tableList = response.data.result.results
        })
        .catch((error) => {})
    },

    goBack() {
      this.$router.push({ name: 'checkQuery' })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/checkAffairs/checkQuery',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },

    toEvalute(rowData) {
      this.$router.push({
        path: '/home/checkAffairs/checkQueryDetail',
        name: 'checkQueryDetail',
        query: {
          id: rowData.id,
          assessId: this.id,
          name: this.name,
          status: this.status,
        },
      })

      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/checkAffairs/checkQuery',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
// .container {
//     padding: 24px;
// }
.mainColor {
  color: #009588;
}

.topTitle {
  background-color: #fff;
  height: 94px;
  border-bottom: 1px solid #e3e7e9;
  padding: 10px 0 10px 24px;
  font-family: 'Microsoft YaHei';
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
  .leftBox {
    padding-top: 10px;
    color: #333;
    .explain {
      padding: 8px 0 0 24px;
      line-height: 20px;
      font-size: 14px;
      font-weight: normal;
      color: #999;
      // span {
      //     color: #333;
      //     b {
      //         color: #ff0000;
      //     }
      // }
    }
  }
  .rightBox {
    text-align: center;
    float: right;
    div {
      float: left;
      &:first-child {
        margin-right: 10px;
      }
      &:nth-child(2) {
        margin-right: 16px;
      }
      &:nth-child(3) {
        margin-right: 24px;
      }
    }
  }
  .saveBtn {
    margin: 0 24px 0 0 !important;
  }
}

.mainCon {
  padding-left: 24px;
  padding-right: 24px;
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
/deep/ .el-dialog__footer {
  background: #fff;
  padding-bottom: 70px;
}
</style>
<style>
.el-tooltip__popper {
  max-width: 30% !important;
  word-break: break-all;
}
</style>
